<script type="text/ecmascript-6">
  import * as monaco from "monaco-editor";

  /**
   * @author 白雨浓
   * @date 2019/1/10 19:49
   *
   *
   **/
  export default {
    name: 'Editor',
    props: {
      value: {},
      width: {
        default: '300px',
      },
      height: {
        default: '300px',
      },
      language: {
        required: true
      },
      config: {}
    },
    data() {
      return {
        editor: null,
      }
    },
    watch: {
      value(val) {
        if (this.editor === null) {
          return;
        }
        if (val !== this.editor.getValue()) {
          this.setValue(val);
        }
      },
    },
    mounted() {
      setTimeout(this.initEditor, 100);


      window.addEventListener('resize', () => {
        if (this.editor) {
          this.editor.layout();
        }
      })
    },
    methods: {
      initConfig() {
        /*默认配置*/
        const config = {
          value: this.value,
          automaticLayout: true,
          autoIndent: true,
          autoClosingBrackets: true,
          acceptSuggestionOnEnter: 'on',
          colorDecorators: true,
          dragAndDrop: true,
          formatOnType: true,
          formatOnPaste: true,
          mouseWheelZoom: true,
          theme: 'vs-dark'
        };

        /*自定义通用配置*/
        if (this.config) {
          Object.keys(this.config)
            .forEach(key => config[key] = this.config[key]);
        }

        /*单项配置*/
        config.language = this.language;

        return config;
      },
      initEditor() {

        this.editor = monaco.editor.create(this.$el, this.initConfig());

        this.editor.onDidChangeModelContent(evt => {
          this.$emit('input', this.editor.getValue());
          this.$emit('change', this.editor.getValue(), evt);
        });

      },
      setValue(val) {
        this.editor.setValue(val);
      },
      setSuggest() {

        const arr = [];
        for (let i = 0; i < 3000; i++) {
          arr.push({
            label: 'TEST' + i,
            kind: monaco.languages.CompletionItemKind.Variable,
            documentation: "The Lodash library exported as Node.js modules.",
            insertText: 'TEST:' + i
          })
        }

        monaco.languages.registerCompletionItemProvider('java', {
          provideCompletionItems: function (model, position) {

            const textUntilPosition = model.getValueInRange({
              startLineNumber: position.lineNumber,
              startColumn: 1,
              endLineNumber: position.lineNumber,
              endColumn: position.column
            });
            const match = textUntilPosition.match(/\${(.*?)/);
            console.log(match + "\t\t\t\t\t" + textUntilPosition);
            return {
              suggestions: match ? arr : []
            };
          }
        });
      }
    },
    render(h) {
      return h('div', {
        style: {
          width: this.width,
          height: this.height,
          margin: '0 auto',
          padding: 0
        }
      })
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
</style>
